<template>
  <div class="gi_table_page">
    <GiTable
      title="指标管理"
      row-key="id"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      :disabled-tools="['size']"
      :disabled-column-keys="['name']"
      @refresh="search"
    >
      <template #toolbar-left>
        <GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset"></GiForm>
      </template>
      <template #toolbar-right>
        <a-button v-permission="['cakerun:storeMetrics:export']" @click="onExport">
          <template #icon><icon-download /></template>
          <template #default>导出</template>
        </a-button>
      </template>
    </GiTable>
  </div>
</template>

<script setup lang="ts">
import type { TableInstance } from '@arco-design/web-vue'
import { type StoreMetricsQuery, exportStoreMetrics, listStoreMetrics } from '@/apis/cakerun/storeMetrics'
import { useDownload, useTable } from '@/hooks'
import { listAllBrand } from '@/apis/cakerun/brandAccount'
import { listAllShop } from '@/apis/cakerun/shopInfo'
import type { ColumnItem } from '@/components/GiForm'

defineOptions({ name: 'StoreMetrics' })

const queryForm = reactive<StoreMetricsQuery>({
  businessTime: undefined,
  shopId: undefined,
  shopName: undefined,
  province: undefined,
  city: undefined,
  exposureCount: undefined,
  exposureCountRingRatio: undefined,
  visitCount: undefined,
  visitCountRingRatio: undefined,
  exposureToVisitRate: undefined,
  exposureToVisitRateRingRatio: undefined,
  visitToPurchaseRate: undefined,
  visitToPurchaseRateRingRatio: undefined,
  rosScore: undefined,
  rosScoreRingRatio: undefined,
  sort: ['id,desc'],
})

const brandInfo = ref<any[]>([])
const shopInfos = ref<any[]>([])
const getBrandInfos = () => {
  listAllBrand({ enable: true }).then((res) => {
    const items: any = []
    res.data.forEach((item) => {
      items.push({ label: item.brand, value: item.id })
    })
    brandInfo.value = items
  })
}
const getShops = () => {
  listAllShop({ enable: true, accountId: queryForm.accountId }).then((res) => {
    const items: any = []
    res.data.forEach((item) => {
      items.push({ label: item.poiName, value: item.id })
    })
    shopInfos.value = items
  })
}
getBrandInfos()
const queryFormColumns: ColumnItem[] = reactive([
  {
    type: 'select',
    label: '品牌',
    field: 'accountId',
    span: { xs: 24, sm: 6, xxl: 6 },
    props: {
      options: brandInfo,
      placeholder: '请选择品牌',
      multiple: true,
      onChange: (value) => {
        getShops()
      },
    },
  },
  {
    type: 'select',
    label: '门店',
    field: 'shopId',
    span: { xs: 24, sm: 6, xxl: 6 },
    props: {
      options: shopInfos,
      placeholder: '请选择门店',
      multiple: true,
    },
  },
  {
    type: 'range-picker',
    label: '业务时间',
    field: 'businessTime',
    span: { xs: 24, sm: 6, xxl: 6 },
    props: {
      showTime: false,
      format: 'YYYY-MM-DD',
    },
  },
])
const {
  tableData: dataList,
  loading,
  pagination,
  search,
} = useTable((page) => listStoreMetrics({ ...queryForm, ...page }), { immediate: true })
const columns: TableInstance['columns'] = [
  { title: '记录日期', dataIndex: 'businessTime', slotName: 'businessTime', width: 130 },
  { title: '门店ID', dataIndex: 'shopId', slotName: 'shopId', width: 150 },
  { title: '门店名称', dataIndex: 'shopName', slotName: 'shopName', width: 260 },
  { title: '省份', dataIndex: 'province', slotName: 'province', width: 80 },
  { title: '城市', dataIndex: 'city', slotName: 'city', width: 120 },
  { title: '曝光人数', dataIndex: 'exposureCount', slotName: 'exposureCount', width: 100 },
  { title: '曝光人数环比', dataIndex: 'exposureCountRingRatio', slotName: 'exposureCountRingRatio', width: 120 },
  { title: '访问人数', dataIndex: 'visitCount', slotName: 'visitCount', width: 100 },
  { title: '访问人数环比', dataIndex: 'visitCountRingRatio', slotName: 'visitCountRingRatio', width: 120 },
  { title: '曝光-访问转化率', dataIndex: 'exposureToVisitRate', slotName: 'exposureToVisitRate', width: 140 },
  { title: '曝光-访问转化率环比', dataIndex: 'exposureToVisitRateRingRatio', slotName: 'exposureToVisitRateRingRatio', width: 180 },
  { title: '访问-购买转化率', dataIndex: 'visitToPurchaseRate', slotName: 'visitToPurchaseRate', width: 140 },
  { title: '访问-购买转化率环比', dataIndex: 'visitToPurchaseRateRingRatio', slotName: 'visitToPurchaseRateRingRatio', width: 180 },
  { title: 'ROS分', dataIndex: 'rosScore', slotName: 'rosScore', width: 80 },
  { title: 'ROS分环比', dataIndex: 'rosScoreRingRatio', slotName: 'rosScoreRingRatio', width: 120 },
]

// 重置
const reset = () => {
  queryForm.businessTime = undefined
  queryForm.shopId = undefined
  queryForm.shopName = undefined
  queryForm.province = undefined
  queryForm.city = undefined
  queryForm.exposureCount = undefined
  queryForm.exposureCountRingRatio = undefined
  queryForm.visitCount = undefined
  queryForm.visitCountRingRatio = undefined
  queryForm.exposureToVisitRate = undefined
  queryForm.exposureToVisitRateRingRatio = undefined
  queryForm.visitToPurchaseRate = undefined
  queryForm.visitToPurchaseRateRingRatio = undefined
  queryForm.rosScore = undefined
  queryForm.rosScoreRingRatio = undefined
  search()
}
// 导出
const onExport = () => {
  useDownload(() => exportStoreMetrics(queryForm))
}
</script>

<style scoped lang="scss"></style>
